<template>
  <section>
    <div class="box">
      <div class="square" style="--i: 0"></div>
      <div class="square" style="--i: 1"></div>
      <div class="square" style="--i: 2"></div>
      <div class="square" style="--i: 3"></div>
      <div class="square" style="--i: 4"></div>
      <div class="square" style="--i: 5"></div>
      <div class="container">
        <div class="form">
          <h2>Forgot Password</h2>
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="form.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="重复密码" prop="repeatPassword">
              <el-input
                type="password"
                v-model="form.repeatPassword"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="学生ID" prop="studentId">
              <el-input v-model="form.studentId"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phoneNumber">
              <el-input v-model="form.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login('form')">修改</el-button>
              <el-button  @click="back" >返回</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { userUpdate } from "@/api/login.js";
export default {
  data() {
    //正则表达式验证
    var checkPhone = (rule, value, callback) => {
      const reg = /^1[0-9][0-9]\d{8}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      } else {
        if (!reg.test(value)) {
          callback(new Error("请输入正确的电话号码"));
        } else {
          callback();
        }
      }
    };
    var checkPassword = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z]*$/;
      if (!value) {
        return callback(new Error("password不能为空"));
      } else {
        if (!reg.test(value)) {
          callback(new Error("请输入正确的密码"));
        } else {
          callback();
        }
      }
    };
    var checkStudentId = (rule, value, callback) => {
      const reg = /^\d{11}$/;
      if (!value) {
        return callback(new Error("学号不能为空"));
      } else {
        if (!reg.test(value)) {
          callback(new Error("请输入正确的学号"));
        } else {
          callback();
        }
      }
    };
    var checkStudentName = (rule, value, callback) => {
      const reg = /^[\u4e00-\u9fa5]+$/;
      if (!value) {
        return callback(new Error("姓名不能为空"));
      } else {
        if (!reg.test(value)) {
          callback(new Error("请输入正确的姓名"));
        } else {
          callback();
        }
      }
    };
    var checkRepeatPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("确认密码不能为空"));
      } else {
        if (value !== this.form.password) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      }
    };
    return {
      form: {
        username: "",
        password: "",
        repeatPassword: "",
        studentId: "",
        phoneNumber: "",
      },
      rules: {
        username: [{ validator: checkStudentName, trigger: "blur" }],
        password: [{ validator: checkPassword, trigger: "blur" }],
        repeatPassword: [{ validator: checkRepeatPassword, trigger: "blur" }],
        studentId: [{ validator: checkStudentId, trigger: "blur" }],
        phoneNumber: [{ validator: checkPhone, trigger: "blur" }],
      },
    };
  },
  name: "ForgotPasswordComponent", // 修改组件名称
  methods: {
    login(form) {
      this.$refs[form].validate((valid) => {
        if (!valid) {
          this.$message.error("请输入正确的信息");
          return false;
        } else {
          console.log(this.form);
          userUpdate({
            studentName: this.form.username,
            password: this.form.password,
            studentId: this.form.studentId,
            phoneNumber: this.form.phoneNumber,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              console.log(res);
              this.$router.push("/login");
            } else {
              this.$message.error("修改失败");

            }
          });
        }
      });
    },
    back() {
      this.$router.push("/login");
    },
  },
};
</script>
<style lang="less">
@import url(../../assets/css/login.css);
</style>